<template>
    <div class="product_item">
        <div class="product_body">
            <div class="product_header flex-row">
                <div class="picture">
                    <a-icon class="icon" type="desktop" />
                </div>
                <div class="header_info">
                    <h2 class="name">{{info.pdtName}}</h2>
                    <p class="id">{{info.pdtCode}}</p>
                </div>
            </div>
            <div class="status_box flex-row">
                <div class="status_item">
                    <p class="label">设备数量</p>
                    <p class="number">{{info.deviceCounts}}</p>
                </div>
                <div class="status_item">
                    <p class="label">发布状态</p>
                    <p class="value flex-row" v-if="info.status=='active'"><i class="status"></i>已发布</p>
                    <p class="value flex-row" v-else><i class="status warn"></i>未发布</p>
                </div>
                <div class="status_item">
                    <p class="label">产品类型</p>
                    <p class="value">
                        <a-tooltip placement="topLeft">
                            <template #title>
                                <span>{{ctgName}}</span>
                            </template>
                            {{ctgName}}
                        </a-tooltip>
                    </p>
                </div>
            </div>
        </div>
        <div class="product_footer flex-row">
            <div class="footer_item">
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>详情</span>
                    </template>
                    <a-icon class="icon" v-if="hasPerm(['product:list:query'])" type="eye" />
                    <a-icon class="icon" v-else @click="scan" type="eye" />
                </a-tooltip>
            </div>
            <div class="footer_item">
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>编辑</span>
                    </template>
                    <a-icon class="icon" v-if="hasPerm(['product:list:update'])" type="edit" />
                    <a-icon class="icon" v-else  @click="edit" type="edit" />
                </a-tooltip>
            </div>
            <div class="footer_item" v-if="info.status=='active'">
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>停用</span>
                    </template>
                    <a-icon class="icon" v-if="hasPerm(['product:list:update'])" type="stop" />
                    <a-icon class="icon" v-else @click="stop" type="stop" />
                </a-tooltip>
            </div>
            <div class="footer_item" v-else>
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>启用</span>
                    </template>
                    <a-icon class="icon" v-if="hasPerm(['product:list:update'])" type="check-circle" />
                    <a-icon class="icon" v-else @click="start" type="check-circle" />
                </a-tooltip>
            </div>
            <div class="footer_item">
                <a-tooltip placement="top">
                    <template slot="title">
                        <span>删除</span>
                    </template>
                    <a-icon class="icon" v-if="hasPerm(['product:list:remove'])" @click="remove" type="close-circle" />
                    <a-icon class="icon" v-else @click="remove" type="close-circle" />
                </a-tooltip>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Product',
    props:{
        info:{
            type:Object,
            default:()=>{}
        },
        typeList:{
            type:Array,
            default:()=>[]
        }
    },
    data(){
        return{
            ctgName:''
        }
    },
    created(){
        this.getNameByCode(this.typeList,this.info.ctgCode)
    },
    methods:{
        edit(){
            this.$emit('edit')
        },
        scan(){
            this.$emit('scan')
        },
        stop(){
            this.$emit('update')
        },
        remove(){
            this.$confirm({
                title: '提示',
                content: '确定要删除该产品？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    this.$emit('remove')
                },
                onCancel() {}
            });
            
        },
        start(){
            this.$emit('update')
        },
        //根据code查询name
        getNameByCode(data,code){
            if(!data) return false;
            if(!Array.isArray(data)) return false;
            data.map(item=>{
                if(item.ctgCode==code){
                    this.ctgName = item.ctgName
                }else{
                    if(item.childs){
                        this.getNameByCode(item.childs,code);
                    }
                }
            })
        }
    },
    filters:{

    }
}
</script>

<style lang="scss" scoped>
.product_item{
    .product_body{
        padding: 20px;
        background: #fff;
        .product_header{
            align-items: center;
            color: $primary-color;
            .picture{
                width: 36px;
                height: 36px;
                text-align: center;
                border-radius: 100%;
                border: 2px solid $primary-color;
            }
            .icon{
                padding-top: 7px;
                font-size: 20px;
            }
            .header_info{
                margin-left: 10px;
                .name{
                    font-size: 14px;
                     color: $primary-color;
                    font-weight: 600;
                    margin-bottom: 0;
                }
                .id{
                    margin-bottom: 0;
                    font-size: 12px;
                    color: #aaa;
                }
            }
        }
        .status_box{
            margin-top: 10px;
            .status_item{
                width: 33.33%;
                // flex: 1;
                flex-shrink: 0;
                text-align: center;
                font-size: 14px;
                color: #666;
                .label{
                    margin-bottom: 4px;
                }
                .number{
                    margin-bottom: 0;
                    font-size: 14px;
                    color: $primary-color;
                    font-weight: 600;
                }
                .value{
                    width: 100%;
                    margin-bottom: 0;
                    color: #666;
                    font-weight: 600;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .status{
                    margin-right: 4px;
                    width: 6px;
                    height: 6px;
                    background: $primary-color;
                    border-radius: 100%;
                    &.warn{
                        background: #ff7875;
                    }
                }
            }
        }
    }
    .product_footer{
        background: #fafafa;
        border-top: 1px solid #e8e8e8;
        .footer_item{
            margin: 5px 0;
            padding: 5px 0;
            flex: 1;
            justify-content: center;
            text-align: center;
            border-right: 1px solid #e8e8e8;
            cursor: pointer;
            &:hover .icon{
                color: $primary-color;
            }
            &:last-child{
                border-right: none;
            }
            .icon{
                font-size: 18px;
                color: #999;
            }
        }
    }
}
</style>